<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<head>
  <title>
    {{lang.global.title.library}} | Valora | GamerNoTitle
  </title>
  {% include 'public/head.html' %}
</head>


<body class="index-page">

  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  {% include 'public/components/library/buttons.html' %}

  <div class="container">
    <a href="/library">
      <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.library.title}}</h1>
    </a>
  </div>

  <!-- {% include 'public/components/library/weapon_buttons.html' %} -->

  <section>
    <div class="container py-4">
      <div class="row">
        <div class="col-lg-7 mx-auto d-flex justify-content-center flex-column">
          <form role="form" name="search" method="post" autocomplete="off" action="/library">
            <div class="row">
              <label>{{lang.library.form.search.title}}</label>
              <div class="input-group">
                {% if not query %}
                <input type="text" class="form-control" placeholder="{{lang.library.form.search.placeholder}}"
                  name="query">
                {% else %}
                <input type="text" class="form-control" placeholder="{{lang.library.form.search.placeholder}}"
                  value="{{query}}" name="query">
                {% endif %}
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-12">
                <button type="submit" class="btn bg-gradient-dark w-100"><img
                    src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/img-navi-valorant-white.svg">{{lang.library.button.search}}</button>
              </div>
            </div>
        </div>
        </form>
      </div>
    </div>
    </div>

    {% include 'public/components/library/page_bar.html' %}

    {% if search_notfound %}
    <div class="container">
      <div class="row text-center py-2 mt-3">
        <div class="col-12 mx-auto">
          <div class="alert alert-danger text-white rounded role=" alert">
            {{lang.library.notfound}}
          </div>
        </div>
      </div>
      <div class="container-fluid px-0 overflow-hidden">
        <div class="row text-center py-2 mt-3">
          <div class="col-12 mx-auto">
            <a href="/library"><button type="button" class="btn bg-gradient-danger btn-lg"
                width="100%"><strong>{{lang.library.button.return}}</strong></button></a>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="container">
      <div class="row">
        {% for weapon in weapon_list %}
        <div class="col-md-4">
          <div class="card mb-4 shadow-sm rounded">
            <div class="gun-image">
              <a href="{{weapon.img|safe}}" data-fancybox="gallery">
                <img height=auto width=100% class="text-center" src={{weapon.img|safe}}>
              </a>
            </div>
            <div class="card-body">
              <h3 class="text-gradient text-primary mb-0 mt-2"><img src={{weapon.tier}} height="28px" width="28px">
                {{weapon.name|safe}}</h3>
              <h3 class="text-gradient text-dark mb-0 mt-2"><img src="/assets/img/VP-black.png" width="32px"
                  height="32px"> {{weapon.unlock|replace("None","0")}}</h3>
              <br>
              {% for level in weapon.levels %}
              {% if level.displayName != '' %}
              <!-- Button trigger modal -->
              <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
                data-bs-target="#WEAPON-{{level.uuid|escape}}">
                {{level.displayName}}: {{level.levelItem}}
              </button>

              <!-- Modal -->
              <div class="modal fade" id="WEAPON-{{level.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                        {{level.displayName}}</h5>
                    </div>
                    <div class="modal-body">
                      <video width=100% controls>
                        <source src="{{level.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                          type="video/mp4">
                        <source src="{{level.streamedVideo}}" type="video/mp4">
                        {{lang.library.modal.videonotavaliable}}
                      </video>
                      <br>
                      <!-- <p class="text-gradient text-danger mb-0 mt-2" align="center">请先暂停播放视频后再关闭窗口，否则视频会一直播放（这是个bug但是我还没修）
                    </p> -->
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn bg-gradient-primary"
                        data-bs-dismiss="modal">{{lang.library.button.close}}</button>
                    </div>
                  </div>
                </div>
              </div>
              {% endif %}
              {% endfor %}
              <br>
              {% for chroma in weapon.chromas %}
              {% if chroma.displayName != '' %}
              <!-- Button trigger modal -->
              <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
                data-bs-target="#WEAPON-{{chroma.uuid|escape}}">
                {{chroma.displayName}}
              </button>

              <!-- Modal -->
              <div class="modal fade" id="WEAPON-{{chroma.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                        {{chroma.displayName}}</h5>
                    </div>
                    <div class="modal-body">
                      {% if chroma.streamedVideo %}
                      <video width=100% controls>
                        <source src="{{chroma.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                          type="video/mp4">
                        <source src="{{chroma.streamedVideo}}" type="video/mp4">
                        {{lang.library.modal.videonotavaliable}}
                      </video>
                      <br>
                      <!-- <p class="text-gradient text-danger mb-0 mt-2" align="center">请先暂停播放视频后再关闭窗口，否则视频会一直播放（这是个bug但是我还没修）
                    </p> -->
                      {% else %}
                      <img width="100%" src="{{chroma.fullRender}}">
                      {% endif %}
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn bg-gradient-primary"
                        data-bs-dismiss="modal">{{lang.library.button.close}}</button>
                    </div>
                  </div>
                </div>
              </div>
              </script>
              {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    {% include 'public/components/library/page_bar.html' %}

    {% include 'public/footer.html' %}
</body>